<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="订单详情"></uni-nav-bar>

		<view class="ui-row">
			<view class="ui-top">
				<view class="ui-status">
					<text>{{list.orderStatus | statusFilter }}</text>
				</view>
			</view>

			<view class="ui-ter">
				<view class="ui-tab">
					<view v-for="(item, index) in list.orderDetailList" :key="index" class="ui-flex mag_first">
						<view class="ui-plate" v-if="list.plateNo">
							<text>{{list.plateNo}}</text>
						</view>
						<view class="ui-image" v-if="item.pic">
							<img :src="item.pic" alt="">
						</view>
						<view class="temporary" v-else-if="list.productType != 3">
							暂无照片
						</view>
						<view class="goods-wallet" v-if="list.productType == 3">
							<uni-iconfont class="icon-qiandai" size="100" color="#EE781C"></uni-iconfont>
						</view>
						<view class="ui-flex-right">
							<view class="title">{{item.name}}</view>
							<view class="tui-flex" style="justify-content: space-between">
								<view><view style="color: #999">数量: x{{item.num}}</view></view>
								<view style="font-size: 30rpx;">￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</view>

				<block v-for="(itemCode, index) in orderSpec" :key="index">
					<view class="ui-tab" v-if="list.orderStatus == 2 && list.productType == 0"
						  style="margin-top: 30rpx;padding: 20rpx 30rpx;">
						<view class="tui-flex" style="justify-content: space-between">
							<view class="ui-title">{{itemCode.userName}}</view>
							<view style="color: #999;">
								<text>使用日期：{{itemCode.useStartDate}}</text>
								<text v-if="itemCode.useEndDate">~</text>
								<text v-if="itemCode.useEndDate">{{itemCode.useEndDate}}</text>
							</view>
						</view>
						<view class="img-src">
							<img :src="itemCode.ticketQRCode" alt="" class="img">
						</view>
					</view>
				</block>

				<!--付款信息-->
				<view class="ui-middle">
					<view class="ui-title">付款信息</view>
					<view class="ui-pad">
						<view class="ui-flex">
							<view class="ui-left">订单总金额</view>
							<view class="ui-right">￥{{list.totalAmount}}</view>
						</view>
						<view class="ui-flex">
							<view class="ui-left">余额支付</view>
							<view class="ui-right">￥{{list.balanceAmount}}</view>
						</view>
						<view class="ui-flex">
							<view class="ui-left">优惠</view>
							<view class="ui-right">-￥{{list.couponAmount}}</view>
						</view>
					</view>
					<view class="ui-bot">
						<view>
							实付款
							<text class="ui-total">￥{{list.actAmount}}</text>
						</view>
					</view>
				</view>

				<view class="ui-middle" v-if="ownSpec.userName">
					<view class="ui-title">租借人信息</view>
					<view class="ui-pad">
						<view class="ui-flex">
							<view class="ui-left">租借人姓名</view>
							<view>{{ownSpec.userName}}</view>
						</view>
						<view class="ui-flex">
							<view class="ui-left">租借人手机号</view>
							<view>{{ownSpec.phone}}</view>
						</view>
						<view class="ui-flex">
							<view class="ui-left">借出时间</view>
							<view>{{ownSpec.useStartDate}}</view>
						</view>
					</view>
				</view>

				<!--订单信息-->
				<view class="ui-middle">
					<view class="ui-title">订单信息</view>
					<view class="ui-pad">
						<view v-if="ownSpec.length"
							  v-for="(i, ownIdx) in ownSpec" :key="ownIdx">
							<view class="tui-flex">
								<view class="ui-left">取货时间</view>
								<view>{{i.pickTime}}</view>
							</view>
							<view class="tui-flex">
								<view class="ui-left">联系人手机号</view>
								<view>{{i.phone}}</view>
							</view>
						</view>
						<view class="tui-flex" v-if="!ownSpec.length && ownSpec.pickTime && list.productType==1">
							<view class="ui-left">取货时间</view>
							<view>{{ownSpec.pickTime}}</view>
						</view>
						<view class="tui-flex" v-if="!ownSpec.length && ownSpec.phone && list.productType==1">
							<view class="ui-left">联系人手机号</view>
							<view>{{ownSpec.phone}}</view>
						</view>
						<view class="tui-flex">
							<view class="ui-left">订单编号</view>
							<view>{{list.orderNo}}</view>
						</view>
						<view class="tui-flex">
							<view class="ui-left">下单时间</view>
							<view>{{list.createTime}}</view>
						</view>
						<view class="tui-flex" v-if="list.payTime">
							<view class="ui-left">付款时间</view>
							<view>{{list.payTime}}</view>
						</view>
					</view>
				</view>

				<view class="ui-middle" v-if="list.orderStatus == 4" style="padding: 20rpx">
					<view class="ui-flex" @tap="showFud = !showFud">
						<view>发票</view>
						<view>
							<text style="padding-right: 20rpx">{{checkboxOff ? '开具发票' : '不开发票'}}</text>
							<uni-icons v-if="showFud" type="arrowdown" size="32" color="#666"></uni-icons>
							<uni-icons v-else type="arrowright" size="32" color="#666"></uni-icons>
						</view>
					</view>
					<view class="ui-flex select" v-if="showFud">
						<view>不开发票</view>
						<view @tap="checkboxOff = !checkboxOff;showFud = !showFud">
							<uni-icons type="checkbox-filled" size="44" :color="!checkboxOff ? '#6CB041': '#ccc'"></uni-icons>
						</view>
					</view>
					<view class="ui-flex" v-if="showFud">
						<view>开具发票</view>
						<view @tap="checkTo">
							<uni-icons type="checkbox-filled" size="44" :color="checkboxOff ? '#6CB041': '#ccc'"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<pay-btn v-if="list.orderStatus == 0" :amount="list.actAmount" @imPayment="imPayment"></pay-btn>
		<pay-btn v-if="(list.orderStatus == 2 || (list.orderStatus == 7 && list.paySts == 1 ))&& list.productType == 0 && list.ndaySts == 0" btnShow btnText="退票" @separateTo="separateTo"></pay-btn>
	</view>
</template>
<script>
	import payBtn from '@/components/payBtn/index'
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import uniIconfont from '@/components/uni-iconfont/index'

	export default {
		components: {
            payBtn, uniIcons, uniIconfont
		},
		filters: {
            statusFilter(val) {
                return {
                    '0': '待付款',
                    '1': '已取消',
                    '2': '待核销',
                    '3': '已退票',
                    '4': '待评价',
                    '5': '已完成',
                    '6': '已删除',
                    '7': '已失效',
                    '8': '待领取',
                    '9': '已领取',
                    '10': '退款中',
                    '11': '已退款',
                    '-1': '已超时'
                }[val]
            }
		},
		data() {
			return {
                checkboxOff: false,
                showFud: false,
				list: {
                    actAmount: null,
                    createTime: null,
                    orderId: null,
                    orderStatus: null,
                    payType: null,
                    plateNo: null,
                    productType: null,
                    totalAmount: null,
                    orderNo: null,
                    title: null,
                    ticketQrCode: null,
                    isTicket: null,
                    id: null
				},
                SRC: '',
				id: '',
                orderSpec: [],
                ownSpec: {}
			}
		},
        onLoad(options) {
		    this.id = options.id
			this.getList()
			// alert(options)
		},
        methods: {
            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r != null) {
                    return decodeURIComponent(r[2]);
                }
                return '';
            },
			getList() {
                let ids;
                if (this.id == '' || this.id == null) {
                    ids = this.getQueryString('ids')
				} else {
                    ids = this.id
				}
                uni.request({
                    url: `order/detail/${ids}`,
                    method: 'GET',
                    header: {'content-type': 'application/json', 'Authorization': 'Bearer ' + uni.getStorageSync('token')},
                    success: (res) => {
                        this.list = res.data.data
						let form = this.list.orderDetailList[0].orderSpec
						if (form) {
                            this.orderSpec = JSON.parse(form)
						}
						if(this.list.productType == 5 || this.list.productType == 1) {
                            this.ownSpec = JSON.parse(this.list.orderDetailList[0].ownSpec)
						}
                    },
                    fail: (error) => {
                        uni.showToast({ title: error.data.message, icon:'none' })
                    }
                })
			},
			//  立即支付
            imPayment() {
                var list = this.list
                if (list.productType == 2) {
                    console.log('停车费')
                    this.$wx.miniProgram.reLaunch({
                        url: `/pages/parkPay/parkPay?money=${list.actAmount}&orderNo=${list.orderNo}&orderId=${list.id}&productType=${list.productType}`,
                        success: function(){
                            console.log('success')
                        },
                        fail: function(err){
                        },
                        complete:function(){
                            console.log('complete');
                        }
                    });
                } else {
                    console.log('门票 商品 ')
                    this.$wx.miniProgram.reLaunch({
                        url: `/pages/pay/pay?money=${list.actAmount}&orderNo=${list.orderNo}&orderId=${list.id}&productType=${list.productType}`,
                        success: function(){
                            console.log('success')
                        },
                        fail: function(err){
                        },
                        complete:function(){
                            console.log('complete');
                        }
                    });
                }
            },
            //  开发票
            checkTo() {
				this.checkboxOff = !this.checkboxOff
                // this.showFud = !this.showFud
				if (this.checkboxOff == true) {
					// setTimeout(() => {
                    //     uni.navigateTo({
                    //         // url: ''
                    //         url: `/pagesA/order/openInvoice?orderNo=${this.list.orderNo}&totalAmount${this.list.totalAmount}&plateNo=${this.list.plateNo}&title=${this.list.title}`
                    //     })
					// }, 500)
                    uni.showLoading({title: '正在请求'})
					this.$api.api('order.invoic', {orderNo: this.list.orderNo, orderId: this.list.id}).then(res => {
                        uni.hideLoading();
					    if (res.code == 200) {
						} else {
					        this.$api.msg(res.message)
                            // uni.showToast({title: res.message, icon: 'none'})
						}
					}).catch(error => {
                        this.$api.msg(error.message)
                        uni.hideLoading();
					})
				}
            },
            //  退票
            separateTo() {
                var than = this
                uni.showModal({
                    title: '提示',
                    content: '确定要退票吗？',
                    success: function (res) {
                        if (res.confirm) {
                            than.$api.api('order.refund', {orderId: than.list.id, orderNo: than.list.orderNo}).then(res => {
                                console.log(res)
                                if (res.code == 200) {
                                    uni.navigateBack({delta: 1})
                                } else {
                                    than.$api.msg(res.message)
                                }
                            }).catch(error => {
                                than.$api.msg(error.message)
                            })
                        } else if (res.cancel) {
                        }
                    }
                });
			}
		}
	}
</script>
<style lang="scss" scoped>
.ui-flex {
	display: flex;
	justify-items: center;
}
.ui-row {
	.ui-top {
		height: 260rpx;
		background: $uni-color-success;
		padding: 30rpx;
		color: #ffffff;
		.ui-status {
			font-size: 34rpx;
		}
	}
	.ui-ter {
		margin: 0 30rpx;
		padding-bottom: 120rpx;
		.ui-tab {
			background: #fff;
			border-radius: 20rpx;
			margin-top: -80rpx;
			padding: 30rpx;
			.mag_first {
				margin-top: 15rpx;
				&:first-child {
					margin: 0;
				}
			}
			.ui-plate {
				background: $uni-color-primary;
				height: 140rpx;
				color: #ffffff;
				padding: 20rpx;
				border-radius: 15rpx;
				line-height: 90rpx;
				font-size: 32rpx;
			}
			.goods-wallet {
				background: #f2f2f2;
				width: 160rpx;
				height: 140rpx;
				border-radius: 15rpx;
			}
			.ui-image {
				width: 25%;
				height: 140rpx;
				img {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
			.temporary {
				background: #f2f2f2;
				text-align: center;
				color: #999;
				padding: 50rpx 35rpx;
				border-radius: 15rpx;
			}
			.ui-flex-right {
				padding-left: 20rpx;
				flex: 1;
				.title {
					font-size: 34rpx;
					/*font-weight: 500;*/
				}
			}
			.img-src {
				text-align: center;
				/*padding-top: 30rpx;*/
				.img {
					width: 360rpx;
				}
			}
		}
		.ui-title {
			font-size: 32rpx;
			font-weight: 500;
		}
		.ui-middle {
			background: #fff;
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding: 30rpx;
			.ui-pad {
				padding: 20rpx 0;
				.ui-left {
					color: #999;
					flex: 1;
				}
				.ui-right {
					flex: 1;
					text-align: right;
					color: red;
					font-size: 32rpx;
				}
			}
			.ui-bot {
				border-top: 2rpx solid #eee;
				text-align: right;
				padding-top: 20rpx;
			}
			.ui-flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.select {
				transition: all 0.2s;
			}
		}
	}
}
.ui-total {
	padding-left: 30rpx;
	color: red;
	font-size: 32rpx;
}
</style>